{% extends 'html/all.html' %}

{% block content %}
    <h1>修改商品</h1>
    <h1>iD：{{ product_id }}</h1>
    <form id="productForm" class="container mt-4">
    <div class="mb-3">
            <label for="id" class="form-label">商品ID</label>
            <input type="text" id="id" name="id" class="form-control" readonly>
        </div>
        <div class="mb-3">
            <label for="productName" class="form-label">商品名称（必填）</label>
            <input type="text" id="productName" name="productName" class="form-control" required>
        </div>
        <div class="mb-3">
            <label for="price" class="form-label">价格（必填）</label>
            <input type="number" id="price" name="price" class="form-control" required>
        </div>
        <div class="mb-3">
            <label for="description" class="form-label">描述（必填）</label>
            <textarea id="description" name="description" class="form-control" required></textarea>
        </div>
        <div class="mb-3">
            <label for="condition" class="form-label">状态（必填）</label>
            <input type="text" id="condition" name="condition" class="form-control" required>
        </div>
        <div class="mb-3">
            <label for="category" class="form-label">类别（必填）</label>
            <input type="text" id="category" name="category" class="form-control" required>
        </div>
        <div class="mb-3">
            <label for="image1" class="form-label">图片1（必填）</label>
            <input type="file" id="image1" name="image1" class="form-control" required>
        </div>
        <div class="mb-3">
            <label for="image2" class="form-label">图片2</label>
            <input type="file" id="image2" name="image2" class="form-control">
        </div>
        <div class="mb-3">
            <label for="image3" class="form-label">图片3</label>
            <input type="file" id="image3" name="image3" class="form-control">
        </div>
        <div class="mb-3">
            <label for="image4" class="form-label">图片4</label>
            <input type="file" id="image4" name="image4" class="form-control">
        </div>
        <div class="mb-3">
            <label for="image5" class="form-label">图片5</label>
            <input type="file" id="image5" name="image5" class="form-control">
        </div>
        <div class="mb-3">
            <label for="image6" class="form-label">图片6</label>
            <input type="file" id="image6" name="image6" class="form-control">
        </div>
        <input type="submit" value="提交" class="btn btn-primary">
    </form>
{% endblock %}
{% block scripts %}
    <script>
        window.onload = function () {
            // 从URL中获取商品ID
            var urlParams = new URLSearchParams(window.location.search);
            var product_id = urlParams.get('id');

            // 向服务器发送GET请求获取商品信息
            fetch('/api/get_shop_revise?id=' + product_id)
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        var product = data.data;

                        // 使用商品信息填充表单的各个字段
                        document.getElementById('productName').value = product[0];
                        document.getElementById('price').value = product[1];
                        document.getElementById('description').value = product[3];
                        document.getElementById('condition').value = product[4];
                        document.getElementById('category').value = product[5];
                        // 如果有图片，也需要填充到对应的字段中
                        if (product[2]) {
                            document.getElementById('image1').src = product[2];
                        }
                        if (product[6]) {
                            document.getElementById('image2').src = product[6];
                        }
                        if (product[7]) {
                            document.getElementById('image3').src = product[7];
                        }
                        if (product[8]) {
                            document.getElementById('image4').src = product[8];
                        }
                        if (product[9]) {
                            document.getElementById('image5').src = product[9];
                        }
                        if (product[10]) {
                            document.getElementById('image6').src = product[10];
                        }
                        document.getElementById('id').value = product[11];

                    } else {
                        alert('获取商品信息失败: ' + data.msg);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        };
        document.getElementById('productForm').addEventListener('submit', function (event) {
            // 阻止表单的默认提交行为
            event.preventDefault();

            // 创建一个新的FormData对象，它可以用来构造一个序列化的表单数据
            var formData = new FormData(event.target);

            // 向服务器发送POST请求
            fetch('/api/update_shop_revise', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        alert('商品信息更新成功');
                    } else {
                        alert('更新商品信息失败: ' + data.msg);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        });
    </script>

{% endblock %}